<template>
  <!-- 标题 -->
  <div class="left-title">
    <span class="text">{{ props.issuesData.title }}</span>
  </div>
  <!-- 点赞 -->
  <div class="issues-like">
    <div
      class="like-box"
      :style="{ color: props.findUserLike?.is_status ? '#409eff' : '' }"
      @click.stop="handleClick(props.issuesData.id)"
    >
      <i class="iconfont icon-31dianzan"></i>
      <span>{{ countLikeNum?.length }}</span>
    </div>
    <el-tag
      v-if="+props.issuesData.top_id !== 0"
      class="opt-top"
      effect="plain"
      :style="{
        background: getOptColor(props.issuesData.top_id),
        borderColor: getOptColor(props.issuesData.top_id)
      }"
      ><span>{{ '置顶' }}</span></el-tag
    >
    <el-tag
      v-if="props.issuesData.priority !== '不指定'"
      class="opt-priority"
      :style="{
        color: getPriorityColor(props.issuesData.priority),
        borderColor: getPriorityColor(props.issuesData.priority)
      }"
      effect="plain"
    >
      <span>{{ props.issuesData.priority }}</span></el-tag
    >
    <div
      class="opt-tags"
      v-for="item in props.issuesData.issues_tags"
      :key="props.issuesData.id"
      :style="{
        color: getTagsColor(item)
      }"
    >
      <i class="iconfont icon-biaoqian" style="font-size: 16px"></i>
      <span>{{ item }}</span>
    </div>
  </div>
  <!-- 问题详情 -->
  <div class="issues-info">
    <div class="left-info">
      <el-tag
        class="opt-status"
        effect="plain"
        :style="{
              color: getStatusColor(props.issuesData.is_status as string),
              borderColor: getStatusColor(props.issuesData.is_status as string)
            }"
      >
        <i
          class="iconfont"
          style="padding-right: 5px"
          :class="getStatusIcon(props.issuesData.is_status as string)"
        ></i>
        <span>{{ props.issuesData.is_status }}</span>
      </el-tag>

      <div class="issues-person">
        <i class="iconfont icon-gerenzhongxin"></i>
        <span>{{ props.issuesData.userName }}</span>
      </div>
      <div class="create-time">
        <span>创建于</span>&nbsp;&nbsp;<span>{{ props.issuesData.created_at }}</span>
      </div>
    </div>
    <div class="handle-btn" v-if="props.issuesData?.user_id === getUserInfo.id">
      <!-- 操作日志 -->
      <!-- <div class="handle-record">
        <el-popover placement="right" :width="450" trigger="click">
          <el-table
            ref="singleTableRef"
            :data="props.issuesData[0].record_connect"
            highlight-current-row
            style="width: 100%"
            height="300"
            :show-header="false"
          >
            <el-table-column type="index" width="50" />
            <el-table-column property="name" label="姓名">
              <template #default="{ row }">
                <span>
                  {{ row.user_name }} 将任务状态 修改为
                  <b>{{ row.status }}</b>
                  {{ row.updated_at }}</span
                >
              </template>
            </el-table-column>
          </el-table>
          <template #reference>
            <span> <i class="iconfont iconbimgis_shuxing"></i> 操作日志</span>
          </template>
        </el-popover>
      </div> -->
      <el-button link icon="Edit" @click="handleEdit(props.issuesData)">编辑</el-button>
      <el-button link type="danger" icon="Delete" @click="handleDelete(props.issuesData)">删除</el-button>
    </div>
  </div>
  <!-- 协作人员 -->
  <div class="assistant-warp" v-if="props.issuesData.charge_id">
    <div class="type-title">协作人员</div>
    <div class="users-warp">
      <div class="user-item">
        <div
          class="user-info"
          v-for="item in props.issuesData?.charge_id"
          :key="item"
        >
          <el-avatar
            :size="40"
            :src="
              getUserData(item)?.avatar
                ? getUserData(item)?.avatar
                : 'https://openim-1309784708.cos.ap-shanghai.myqcloud.com/4ce4fccbca32722fdd9d41acb48ef409.jpg'
            "
          ></el-avatar>
          <p class="user-name">{{ getUserData(item)?.userName }}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- 内容 -->
  <div class="issues-content">
    <v-md-editor mode="preview" v-model="props.issuesData.content"></v-md-editor>
  </div>

  <!-- 评论 -->
  <div class="issues-comment">
    <Comment :issuesData="props.issuesData" @send-refresh="handleRefresh"></Comment>
  </div>
</template>

<script lang="ts" setup>
import { PropType, computed, onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'

// import { deleteIssuesData } from '@/apis/issues/issues-lists'
// import { IlikeData, Issues } from '../../config/issues'
// import { getRecodeList } from '@/apis/issues/issues-record'

import { store } from '@/store/issues'
import { storeToRefs } from 'pinia'
import { usePermission } from '@/hooks/usePermission'

import Comment from './Comment.vue'
import { IlikeData, IProblems } from '../../config/problems'
import { userStore } from '@/store/user'
import { deleteProblemsData } from '@/apis/system/problems'

const props = defineProps({
  issuesData: {
    type: Object as PropType<IProblems>,
    default: () => {}
  },
  findUserLike: {
    type: Object as PropType<IlikeData>,
    default: () => {}
  },
  countLikeNum: {
    type: Object as PropType<IlikeData[]>,
    default: () => []
  },
  getUserInfo: {
    type: Object,
    default: () => {}
  }
})

/**
 * @desc:获取人员信息
 * @param {*}
 */
const userData = userStore()
userData.getUserData()
const { userlistData } = storeToRefs(userData)

const issueStore = store()
const { tagsData, userList } = storeToRefs(issueStore)
/**
 * @desc: 刷新主页面
 * @return {*}
 */
const emit = defineEmits(['send-click-like', 'refresh'])
const handleRefresh = () => {
  emit('refresh')
}

/**
 * @desc: 编辑
 */
const $router = useRouter()
const handleEdit = (item: IProblems) => {
  $router.push({
    name: 'CreateIssues',
    query: { id: item.id }
  })
}

/**
 * @desc: 删除
 */
const handleDelete = (item: IProblems) => {
  ElMessageBox.confirm(`您确定要删除此Issue吗?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    lockScroll: false
  }).then(() => {
      deleteProblemsData(item.id).then((res) => {
        if (!res) return
        $router.push({
          name: 'Issues'
        })
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消'
      })
  })
}

/**
 * @desc: 获取标签
 */
onMounted(async () => {
  await issueStore.getTagsData()
})

/**
 * @desc: 点赞
 * @return {*}
 */
const handleClick = (issueId: number) => {
  emit('send-click-like', issueId)
}

/**
 * @desc: 获取协作人员
 * @return {*}
 */
const getUserData = computed(() => (item: number) => {
  return userlistData.value.find((res) => {
    return res.id == item
  })
})

const optPriorityColor: { [key: string]: string } = {
  不指定: '#B0B0B0',
  严重: '#EF0016',
  主要: '#FF8F00',
  次要: '#008AFF',
  不重要: '#73E06F'
}
const getPriorityColor = (res: string) => {
  return optPriorityColor[res]
}

const optIdColor: { [key: string]: string } = {
  '1': '#95d475'
}
const getOptColor = (res: number) => {
  return optIdColor[res]
}

const optTagsColor = (res: string) => {
  const findTags = tagsData.value.find((item) => {
    return item.label === res
  })
  return findTags?.tags_color
}

const getTagsColor = (res: string) => {
  return optTagsColor(res)
}

const statusIcon: { [key: string]: string } = {
  待办的: 'icon-daiban3',
  进行中: 'icon-jinhangzhong',
  已完成: 'icon-yiwancheng',
  已拒绝: 'icon-yijujue'
}
const statusColor: { [key: string]: string } = {
  待办的: '#6a6a6a',
  进行中: '#6a6a6a',
  已完成: '#4baf50',
  已拒绝: '#ec0019'
}
const getStatusIcon = (res: string) => {
  return statusIcon[res]
}

const getStatusColor = (res: string) => {
  return statusColor[res]
}

// 状态
const optStatus = [
  {
    value: '待办的',
    label: '待办的',
    icon: 'icon-daiban3'
  },
  {
    value: '进行中',
    label: '进行中',
    icon: 'icon-jinhangzhong'
  },
  {
    value: '已完成',
    label: '已完成',
    icon: 'icon-yiwancheng',
    iconColor: '#4baf50'
  },
  {
    value: '已拒绝',
    label: '已拒绝',
    icon: 'icon-yijujue',
    iconColor: '#ec0019'
  }
]
</script>

<style lang="less" scoped>
.left-title {
  display: flex;
  align-items: center;
  width: 100%;
  padding-bottom: 20px;
  .text {
    font-size: 20px;
    font-weight: 600;
    line-height: 22px;
    word-break: break-all;
  }
}
.issues-like {
  display: flex;
  align-items: center;
  padding-bottom: 10px;
  .opt-top,
  .opt-priority {
    height: 18px;
    line-height: 18px;
    font-size: 12px;
    padding: 8px;
    margin-right: 20px;
  }
  .opt-top {
    span {
      color: #ffffff;
    }
  }
  .opt-tags {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-right: 20px;
    .icon-biaoqian {
      transform: translateY(2px);
      padding-right: 5px;
    }
  }
  .like-box {
    line-height: 22px;
    padding-right: 20px;
    padding-left: 2px;
    transition: all ease 0.05s;
    &:hover {
      color: #409eff;
      transform: scale(1.1);
    }
    &:hover .icon-31dianzan {
      transform: rotate(15deg);
    }
    .icon-31dianzan {
      display: inline-block;
      font-size: 18px;
      line-height: 22px;
      padding-right: 3px;
    }
  }
}
.issues-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-bottom: 20px;
  .left-info {
    display: flex;
    align-items: center;
    .opt-status {
      margin-right: 20px;
      height: 25px;
      :deep(.el-tag__content) {
        display: flex;
        align-items: center;
      }
      .iconfont {
        display: inline-block;
      }
    }
    .issues-person {
      margin-right: 20px;
    }
  }
  .handle-btn {
    display: flex;
    .handle-record {
      display: flex;
      align-items: center;
      padding-right: 12px;
      span {
        line-height: 16px;
        .iconfont {
          vertical-align: bottom;
        }
      }
    }
  }
}

.assistant-warp {
  margin-bottom: 20px;
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  .type-title {
    padding-top: 10px;
    font-size: 1.1em;
  }
  .users-warp {
    display: flex;
    flex-wrap: wrap;
    .user-item {
      flex-basis: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      .user-info {
        padding: 0 20px;
        text-align: center;
        .user-name {
          margin-top: 5px;
          text-align: center;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
.issues-content {
  :deep(.github-markdown-body) {
    padding: 0;
  }
}

.el-button--large {
  margin-top: 20px;
}
</style>
